<template>
  <!-- 窗口互动 -->
  <div class='windowInteraction'>
    <div class="title">12.06,前阵子网上出现了一个大佬做的多窗口粒子交互，挺帅的，查找了一下窗口标签间的通讯方式。自己也写一个demo，留作记录。</div>
    <!-- <div :class="['btn', allow ? 'allow' : '']" @click="allow = !allow">允许跨标签</div> -->
    <!-- 
      实现思路：
        默认在当前窗口内移动，
        如果点击允许跨标签，则可以滚动到其他的窗口
        如果取消，则停留在当前窗口滚动

      实现方式：
        元素滚动行为，X轴 + Y轴
        获取元素当前滚动位置
        1.元素按下，跟随移动
        2.元素松开，取消移动
        3.元素移动，发送一个基于显示器窗口的位置
        4.其余窗口接受位置，转换，变成当前元素位置
     -->
    <img src="@/assets/images/icon/sphere.png" class="sphere" ref="sphere" @mousedown="sphereMouseDown">
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';

const allow = ref(false); // 是否允许标签跨越
const sphere = ref(null); // 小球dom

// 存在数据
/**
 * 当前数据距离窗口的位置X、Y轴
 */
const boundInfo = {}; // 窗口传输信息
const currentPageInfo = ref({}); // 当前页面信息 初始x、y轴位置 通过resize更新


// 碰撞小球实例
onMounted(() => {
  window.addEventListener('scroll', () => {console.log('resize 窗口变化')})
})
// console.log('window.outerHeight', window.outerHeight)

// 获取导航条标签高度
// function scrollHeight() { // 获取浏览器的导航条标签高度
//   return window.outerHeight - window.innerHeight;
// }

const windowLabelHeight = window.outerHeight - window.innerHeight;  // 浏览器导航条标签高度

// 监听小球移动
function sphereMouseDown(event) {
  console.log('e', event)
  const sphereRect = sphere.value.getBoundingClientRect();
  let startY = sphereRect.top;
  let startX = sphereRect.left;                      // 当前元素距离窗口(0, 0)位置
  // let cursorStartScreenX, cursorStartScreenY            // 鼠标初始位置
  // TODO 监听window初始点击位置，记录差值
  let differenceY, differenceX;

  window.onmousedown = e => {
    differenceY = e.screenY - startY - windowLabelHeight;
    differenceX = e.screenX - startX;
  }

  window.onmousemove = e => {                        // 监听鼠标移动
    event.target.style.top = (e.screenY - windowLabelHeight - differenceY) + 'px'; 
    event.target.style.left = (e.screenX - differenceX) + 'px'; 
  }
  window.onmouseup = e => {                          // 监听抬起（暂停移动
    window.onmousedown = null;
    window.onmousemove = null;
  }
}
</script>
 
<style lang='scss'>
.windowInteraction {
  .title {
    font-size: 18px;
    line-height: 30px;
  }

  .btn {
    width: 100px;
    background-color: red;
    height: 40px;
    border-radius: 40px;
    line-height: 40px;
    text-align: center;
    transition: all .3s;
    cursor: pointer;
    user-select: none;
    color: aliceblue;
    margin: 30px auto;
  }

  .allow {
    background-color: green;
    color: black;
  }

  .sphere {
    width: 100px;
    height: 100px;
    z-index: 1;
    position: absolute;
    top: 300px;
    left: 0;
    -webkit-user-drag: none;
  }
}
</style>